<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 3 Props 数据传递及事件监听演示</title>
    <script src="../libs/vue.global.min.js"></script>
</head>

<body>
    <!-- 定义 Vue 应用的挂载点 -->
    <div id="app">
        <!-- 使用子组件并传递数据，同时监听子组件自定义事件 -->
        <child-component :message="parentMessage" @button-clicked="handleButtonClick"></child-component>
        <p>按钮点击次数: {{ clickCount }}</p>
    </div>

    <script>
        const { createApp } = Vue;
        const app = createApp({
            data() {
                return {
                    parentMessage: '这是从父组件传递过来的数据',
                    clickCount: 0
                };
            },
            methods: {
                handleButtonClick() {
                    this.clickCount++;
                }
            }
        });

        // 定义子组件
        app.component('child-component', {
            props: ['message'],
            template: `
                <div>
                    <p>接收到的父组件数据: {{ message }}</p>
                    <button @click="$emit('button-clicked')">点击我</button>
                </div>
            `
        });

        // 挂载应用到 DOM 节点
        app.mount('#app');
    </script>
</body>

</html>